---
title: What is your home address?
scenario: |
  As part of an online service, you are asked to provide your address.

  Things to try:

  1. Intentionally avoid answering the questions before continuing to the next
      page.
---

{# This example is based of the  "What is your home address?" example: https://design-system.service.gov.uk/patterns/addresses/multiple/index.html #}
{% extends "layouts/full-page-example.njk" %}

{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/button/macro.njk" import govukButton %}

{% set pageTitle = example.title %}
{% block pageTitle %}{{ "Error: " if errorSummary | length }}{{ pageTitle }} - GOV.UK{% endblock %}

{% block beforeContent %}
  {{ govukBackLink({
    href: "/"
  }) }}
{% endblock %}

{% block content %}
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
      <form method="post" novalidate>
        {% if errorSummary | length %}
          {{ govukErrorSummary({
            titleText: "There is a problem",
            errorList: errorSummary
          }) }}
        {% endif %}

        {% call govukFieldset({
          legend: {
            text: "What is your address?",
            classes: "govuk-fieldset__legend--xl",
            isPageHeading: true
          }
        }) %}

          {{ govukInput({
            label: {
              html: 'Building and street <span class="govuk-visually-hidden">line 1 of 2</span>'
            },
            id: "address-line-1",
            name: "address-line-1",
            value: values["address-line-1"],
            errorMessage: errors["address-line-1"],
            autocomplete: "address-line1"
          }) }}

          {{ govukInput({
            label: {
              html: '<span class="govuk-visually-hidden">Building and street line 2 of 2</span>'
            },
            id: "address-line-2",
            name: "address-line-2",
            value: values["address-line-2"],
            autocomplete: "address-line2"
          }) }}

          {{ govukInput({
            label: {
              text: "Town or city"
            },
            classes: "govuk-!-width-two-thirds",
            id: "address-town",
            name: "address-town",
            value: values["address-town"],
            errorMessage: errors["address-town"]
          }) }}

          {{ govukInput({
            label: {
              text: "County"
            },
            classes: "govuk-!-width-two-thirds",
            id: "address-county",
            name: "address-county",
            value: values["address-county"],
            errorMessage: errors["address-county"]
          }) }}

          {{ govukInput({
            label: {
              text: "Postcode"
            },
            classes: "govuk-input--width-10",
            id: "address-postcode",
            name: "address-postcode",
            value: values["address-postcode"],
            errorMessage: errors["address-postcode"],
            autocomplete: "postal-code"
          }) }}

        {% endcall %}

        {{ govukButton({
            text: "Continue"
          }) }}
      </form>
    </div>
  </div>
{% endblock %}
